import React, { FC } from "react";
import { Link, useNavigate } from "react-router-dom";
import { LOGIN_PATHNAME } from "../router";
// import { getUserInfo } from "../utils/api";
// import { useRequest } from "ahooks";
import { UserOutlined } from "@ant-design/icons";
import { Button, message } from "antd";
import { removeToken } from "../storage/userToken";
import { useDispatch } from "react-redux";
import { logoutReducer } from "../store/userReducer";
import useGetUserInfo from "../hooks/useGetUserInfo";
const UserInfo: FC = () => {
  const nav = useNavigate();
  const dispatch=useDispatch()
  const { username, nickname } = useGetUserInfo();
  // const { data } = useRequest(getUserInfo);
  //   const { username, nickname } = data || {};
  const logout = () => {
    dispatch(logoutReducer())
    removeToken();
    message.success("退出登录");
    nav(LOGIN_PATHNAME);
  };
  const UserInfo = (
    <div>
      <span style={{ color: "#e8e8e8" }}>
        <UserOutlined />
        {nickname}
      </span>
      <Button type="link" onClick={logout}>
        退出登录
      </Button>
    </div>
  );
  const Login = (
    <div>
      <Link to={LOGIN_PATHNAME}>登录</Link>
    </div>
  );
  return <div>{username ? UserInfo : Login}</div>;
};
export default UserInfo;
